<template>
  <div class="page">
    <ElDialog
      v-model="dialogVisible"
      :title="title"
      width="500"
      center
      :before-close="handleClose"
    >
      <ElForm
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
      >
        <ElRow>
          <ElCol :span="24" class="searchCol">
            <ElFormItem label="重复频率" prop="frequencyNum1">
              <div style="display: flex; width: 100%">
                <span style="width: 6%"> 每 </span>
                <ElInput
                  style="width: 47%"
                  v-model="ruleForm.frequencyNum1"
                  placeholder="请输入"
                ></ElInput>
                <ElSelect
                  style="width: 47%"
                  v-model="ruleForm.frequencyNum2"
                  placeholder="请选择"
                >
                  <ElOption
                    v-for="item in frequencyData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </ElSelect>
              </div>
            </ElFormItem>
          </ElCol>

          <ElCol :span="24" class="searchCol">
            <ElFormItem label="重复日期" prop="date">
              <ElDatePicker
                v-model="ruleForm.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="24" class="searchCol">
            <ElFormItem label="执行时间" prop="time">
              <ElTimePicker
                style="width: 100%"
                v-model="ruleForm.time"
                :default-value="new Date(0, 0, 0, 12, 0, 0)"
                format="HH:mm:ss"
                value-format="HH:mm:ss"
                placeholder="选择时间"
                type="time"
              /> </ElFormItem
          ></ElCol>
        </ElRow>
      </ElForm>
      <template #footer>
        <div class="dialog-footer">
          <ElButton @click="handleClose">取消</ElButton>
          <ElButton type="primary" @click="submitForm(ruleFormRef)">
            确定
          </ElButton>
        </div>
      </template>
    </ElDialog>
  </div>
</template>
<script lang="ts" setup>
import {
  ElMessageBox,
  ElDialog,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElRadioGroup,
  ElRadio,
  ElMessage,
  ElSelect,
  ElOption,
  ElTreeSelect,
  ElTable,
  ElSwitch,
  ElPagination,
  ElRow,
  ElCol,
  ElTimePicker,
  ElDatePicker,
} from 'element-plus';
import { reactive, ref } from 'vue';
const emit = defineEmits(['flyhandRow']);
const dialogVisible = ref(false);
const title = ref('重复定时');
const addDialog = () => {
  dialogVisible.value = true;
};

const editDialog = (obj) => {
  dialogVisible.value = true;
  ruleForm.id = obj.id;
  ruleForm.name = obj.name;
};

defineExpose({ addDialog, editDialog });
const ruleFormRef = ref();
const ruleForm = reactive<RuleForm>({
  id: '',
  time: '',
  date: '',
  frequencyNum1: '',
  frequencyNum2: '1',
  frequency: '',
});
const rules = reactive({
  frequencyNum1: [{ required: true, message: '请选择频率', trigger: 'blur' }],
  date: [{ required: true, message: '请选择日期', trigger: 'change' }],
  time: [{ required: true, message: '请选择时间', trigger: 'change' }],
});
const frequencyData = [
  {
    value: '1',
    label: '天',
  },
  {
    value: '2',
    label: '周',
  },
  {
    value: '3',
    label: '月',
  },
];

let currentPage = ref(1);

const submitForm = async (formEl) => {
  emit('timeRow', ruleForm);
  dialogVisible.value = false;
  // if (!formEl) return;
  // await formEl.validate((valid, fields) => {
  //   if (valid) {
  //     // 添加成功
  //     ElMessage({
  //       plain: true,
  //       message: '添加成功',
  //       type: 'success',
  //     });
  //   } else {
  //     console.log('error submit!', fields);
  //   }
  // });
};

const resetForm = (formEl) => {
  ruleForm.name = '';
  ruleForm.organization = '';

  currentPage.value = 1;
};

const handleClose = (done: () => void) => {
  dialogVisible.value = false;
  // ElMessageBox.confirm("确定关闭对话框?")
  //   .then(() => {
  //     dialogVisible.value = false;
  //   })
  //   .catch(() => {
  //     // catch error
  //   });
};
</script>
<style lang="scss" scoped>
.marginRight {
  margin-right: 10px;
}

:deep(.el-table th) {
  background: #fafafa !important;
}
</style>
